<template>
  <div class="leftChart">
    <h4>每月网站发布政策数量</h4>
    <div id="main" style="width: 100%;height: 400px;top:0"></div>
  </div>
</template>

<script>
import echarts from "echarts";
import { postAjax, getAjax } from "../../../api/api.js";
export default {
  name: "",
  data() {
    return {
      charts: "",
      PolicyCount: [],
      PolicyData: []
    };
  },
  methods: {
    getPolicyCount() {
      this.$Loading.start();
      getAjax("/policyInfo/getPolicyCount").then(response => {
        if (response.data.code === 0) {
          this.$Loading.finish();
          this.isLoading = false;
          this.TypeCountData = [];
          this.countData = [];
          let _this = this;
          response.data.obj.forEach(element => {
            _this.PolicyData.push(element.month);
            _this.PolicyCount.push(element.count);
          });
          this.drawPie("main");
        } else {
          this.$Loading.error();
          this.$Message.warning("数据请求异常");
        }
      });
    },
    drawPie(id) {
      this.charts = echarts.init(document.getElementById(id));
      this.charts.setOption({
        title: {
          text: "",
          textStyle: {
            fontWeight: "normal",
            fontSize: 12,
            color: "#F1F1F3"
          },
          left: "6%"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            lineStyle: {
              color: "#57617B"
            }
          }
        },
        legend: {
          icon: "rect",
          itemWidth: 10,
          itemHeight: 6,
          itemGap: 10,
          data: [""],
          right: "4%",
          textStyle: {
            fontSize: 12,
            color: "#F1F1F3"
          }
        },
        grid: {
          left: "1%",
          right: "2%",
          bottom: "8%",
          top: "14%",
          width:"95%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                color: "#ccc"
              }
            },
            splitLine: {
              show: true,
              interval: "auto",
              lineStyle: {
                color: ["#ccc"]
              }
            },
            data: this.PolicyData,
            axisLabel: {
              interval: 0,
              rotate:40,
              textStyle: {
                fontSize: 12,
                color: "#000"
              }
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            // interval: 30,
            max: 500,
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: "#ccc"
              }
            },
            axisLabel: {
              rotate:40,
              textStyle: {
                fontSize: 12,
                color: "#000"
              }
            },
            splitLine: {
              lineStyle: {
                color: "#ccc"
              }
            }
          }
        ],
        series: [
          {
            name: "",
            type: "line",
            smooth: true,
            lineStyle: {
              normal: {
                width: 2
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(82, 191, 255, 0.3)"
                    },
                    {
                      offset: 0.8,
                      color: "rgba(82, 191, 255, 0)"
                    }
                  ],
                  false
                ),
                shadowColor: "rgba(228, 139, 76, 0.1)",
                shadowBlur: 10
              }
            },
            symbolSize: 4,
            itemStyle: {
              normal: {
                color: "rgb(82, 191, 255)",
                borderColor: "#e48b4c"
              }
            },
            data: this.PolicyCount
          }
        ]
      });
    }
  },
  //调用
  mounted() {
    // this.$nextTick(function() {
    //   this.drawPie("main");
    // });
    this.getPolicyCount();
  }
};
</script>
<style>
.leftChart {
  position: relative;
  padding: 10px;
  float: left;
}
.leftChart h4 {
  color: #333;
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: 16px;
  display: inline-block;
  font-weight: 500;
}
</style>
